<template>
<div class="user-profile">
  <!-- 导航栏 -->
<van-nav-bar
  class="page-nav-bar"
  title="个人信息"
  left-arrow
  @click-left="$router.go(-1)"
></van-nav-bar>
  <!-- /导航栏 -->
<!-- 选择头像 -->
<input type="file" hidden ref="file" @change="onFileChange"
><!-- /选择头像 -->
  <!-- 个人信息 -->
  <van-cell title="头像" is-link @click="$refs.file.click()">
  <van-image class="avatar" fit="cover" round :src="user.photo" />
</van-cell>
  <van-cell title="昵称" :value="user.name" is-link @click="isUpdateNameShow=true"></van-cell>
  <van-cell title="性别" :value="user.gender===1?'女':'男'" is-link @click="isUpdateGenderShow=true"></van-cell>
  <van-cell title="生日" :value="user.birthday" is-link @click="isUpdateBirthdayShow=true"></van-cell>
  <!-- /个人信息 -->

  <!-- 编辑昵称 -->
  <van-popup :style="{ height: '100%' }" v-model:show="isUpdateNameShow" position="bottom">
  <UpdateName
  v-if="isUpdateNameShow"
  :name="user.name"
  @close="isUpdateNameShow=false"
  @confirmSuccess="confirmNameSuccess"
  ></UpdateName>
  </van-popup>
  <!-- /编辑昵称 -->

  <!-- 编辑性别 -->
  <van-popup v-model:show="isUpdateGenderShow" position="bottom">
<UpdateGender
v-if="isUpdateGenderShow"
:gender="user.gender"
@close="isUpdateGenderShow=false"
@confirmSuccess="confirmGenderSuccess"
></UpdateGender>
  </van-popup>
  <!-- /编辑性别 -->

  <!-- 编辑生日 -->
  <van-popup v-model:show="isUpdateBirthdayShow" position="bottom">
<UpdateBirthday
v-if="isUpdateBirthdayShow"
:birthday="user.birthday"
@close="isUpdateBirthdayShow=false"
@confirmSuccess="confirmBirthdaySuccess"
></UpdateBirthday>
  </van-popup>
  <!-- /编辑生日 -->

  <!-- 编辑头像 -->
  <van-popup v-model:show="isUpdatePhotoShow" position="bottom" :style="{ height: '100%' }">
<UpdatePhoto
v-if="isUpdatePhotoShow"
:img="image"
@close="isUpdatePhotoShow=false"
@updata-photo="user.photo=$event"
></UpdatePhoto>
  </van-popup>
  <!-- /编辑头像 -->
</div>
</template>

<script>
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdateBirthday from './components/update-birthday.vue'
import UpdatePhoto from './components/update-photo.vue'
import { getUserProfile } from '@/api/user'
import { ref, getCurrentInstance } from 'vue'
import { Toast } from 'vant'
export default {
  name: 'UserProfile',
  created () {
    this.loadUserProfile()
  },
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  setup () {
    const { proxy } = getCurrentInstance()
    const user = ref({})
    const image = ref(null)
    const isUpdateNameShow = ref(false)// 昵称修改是否弹出
    const isUpdateGenderShow = ref(false)// 性别修改是否弹出
    const isUpdateBirthdayShow = ref(false)// 生日修改是否弹出
    const isUpdatePhotoShow = ref(false)// 修改头像是否弹出
    async function loadUserProfile () {
      try {
        const { data } = await getUserProfile()
        user.value = data.data
      } catch (err) {
        if (err.response && err.response.status === 401) {
          Toast.fail('请重新登录')
        } else {
          Toast.fail('获取失败')
        }
      }
    }
    // 昵称修改
    function confirmNameSuccess (message) {
      user.value.name = message
      isUpdateNameShow.value = false
    }
    // 性别修改
    function confirmGenderSuccess (message) {
      user.value.gender = message
      isUpdateGenderShow.value = false
    }
    // 生日修改
    function confirmBirthdaySuccess (message) {
      user.value.birthday = message
      isUpdateBirthdayShow.value = false
    }
    // 头像修改
    function onFileChange () {
      const file = proxy.$refs.file.files[0]// 获取图片
      image.value = window.URL.createObjectURL(file)// 获取blob
      isUpdatePhotoShow.value = true
      proxy.$refs.file.value = ''// 解决选同一文件不触发change事件的问题
    }
    return {
      user,
      image,
      isUpdateNameShow,
      isUpdateGenderShow,
      isUpdateBirthdayShow,
      isUpdatePhotoShow,
      loadUserProfile,
      confirmNameSuccess,
      confirmGenderSuccess,
      confirmBirthdaySuccess,
      onFileChange
    }
  }
}
</script>

<style lang="less" scoped>
.user-profile{
  .avatar{
    width: 60px;
    height: 60px;
  }
  /deep/.van-popup{
    background-color: #f5f7f9;
  }
}
</style>
